<!-- 
  标准表格v1
  能力：
  展示列、操作列、选择框
  输入：
  columns:数据列配置
  data:数据
  operations:操作列配置
  enableSelection:是否显示多选列
 -->

<template>
  <el-dialog v-model="dialogVisible" title="Tips" width="30%">
    <el-form>
      <el-form-item v-for="(item, index) in  formConfigs " :ref="item.key" :key="index" :label="item.label">
        <el-input v-if="item.valueType === FormDataType.STRING" v-model="formData[index]"></el-input>
        <el-select v-if="item.valueType === FormDataType.SELECT || item.valueType === FormDataType.MULTISELECT"
          :multiple="item.valueType === FormDataType.MULTISELECT" v-model="formData[index]">
          <el-option v-for="(item, innerindex) in optionsCached[index]" :key="innerindex" :value="item.value"
            :label="item.label" />
        </el-select>

        <el-input-number v-if="item.valueType === FormDataType.NUMBER" v-model="formData[index]"></el-input-number>
      </el-form-item>

    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancelDialog">取消</el-button>
        <el-button type="primary" @click="submitForm">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup lang="ts" generic="T extends object">
import { ElMessage } from 'element-plus';
import { ref, reactive } from 'vue';
import { FormDataType } from '.';
import type { FormConfigItem } from '.';

const { formConfigs, beforeCancel, beforeReveal, onSubmit } = defineProps({
  formConfigs: Array<FormConfigItem>,
  beforeCancel: Function,
  beforeReveal: Function,
  onSubmit: Function
})

const dialogVisible = ref(false)
const optionsCached = [] as Array<any>;
const formData = reactive([] as Array<any>);

const initDialog = () => {
  if (!formConfigs) {
    ElMessage.error("未传入表单配置！")
    return;
  }
  for (let i = 0; i < formConfigs.length; i++) {
    const item = formConfigs[i]
    if (typeof item.initialValue === 'function') {
      //formData[i] = item.initialValue()
      formData.push(item.initialValue)
    } else {
      //formData[i] = item.initialValue
      formData.push(item.initialValue)
    }
    if (item.valueType === FormDataType.SELECT || item.valueType === FormDataType.MULTISELECT) {
      console.log(typeof item.getOption)
      if (!item.getOption) {
        ElMessage.error(item.key + "属性未传入options参数")
      } else if (typeof item.getOption === 'function') {
        const cache = item.getOption()
        if (Array.isArray(cache))
          optionsCached[i] = cache
        else
          item.getOption().then((res: any) => {
            optionsCached[i] = res
          })
      } else {
        optionsCached[i] = item.getOption;
      }
    }
  }
  console.log(formData)
}

const reInitValues = () => {
  if (!formConfigs) {
    ElMessage.error("未传入表单配置！")
    return;
  }
  for (let i = 0; i < formConfigs.length; i++) {
    const item = formConfigs[i]
    if (typeof item.initialValue === 'function') {
      formData[i] = item.initialValue()
    } else {
      formData[i] = item.initialValue
    }
  }
}

const revealDialog = () => {
  if (beforeReveal)
    beforeReveal()
  dialogVisible.value = true
}

const cancelDialog = () => {
  if (beforeCancel)
    beforeCancel()
  dialogVisible.value = false
  reInitValues()
}

//@ts-ignore
const submitForm = () => {
  console.log(formData)
  if (onSubmit && formConfigs) {
    let fData = {}
    for (let i = 0; i < formConfigs.length; i++) {
      const key = formConfigs[i].key
      const value = formData[i]
      console.log(key + value)
      //@ts-ignore
      fData[key] = value
    }
    onSubmit(fData)
  }
  dialogVisible.value = false
  reInitValues()
}

initDialog();

defineExpose({
  revealDialog,
  cancelDialog,
  reInitValues,
  submitForm
})

</script>

<style scoped>
.table {
  width: 100%;
}
</style>
